<template>
  <div class="nft-box" id="nftBox">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="290"
      height="500"
      viewBox="0 0 290 500"
    >
      <defs>
        <filter xmlns="http://www.w3.org/2000/svg" id="f1">
          <feImage
            xmlns:xlink="http://www.w3.org/1999/xlink"
            result="p2"
            xlink:href=""
          ></feImage>
          <feImage
            xmlns:xlink="http://www.w3.org/1999/xlink"
            result="p3"
            xlink:href=""
          ></feImage>
          <feBlend mode="overlay" in2="p3" result="blendOut"></feBlend>
          <feGaussianBlur in="blendOut" stdDeviation="42"></feGaussianBlur>
        </filter>
        <clipPath id="corners">
          <rect width="290" height="500" rx="42" ry="42"></rect>
        </clipPath>
        <path
          id="text-path-a"
          d="M40 12 H250 A28 28 0 0 1 278 40 V460 A28 28 0 0 1 250 488 H40 A28 28 0 0 1 12 460 V40 A28 28 0 0 1 40 12 z"
        ></path>
      </defs>
      <g clip-path="url(#corners)">
        <rect fill="95ad61" x="0px" y="0px" width="290px" height="500px"></rect>
        <rect x="0px" y="0px" width="290px" height="500px" style="filter: url('#f1')"></rect>
      </g>
      <text text-rendering="optimizeSpeed">
        <textPath
          startOffset="-100%"
          fill="white"
          font-family="'Courier New', monospace"
          font-size="10px"
          xlink:href="#text-path-a"
        >
          {{ account }}
          <animate
            additive="sum"
            attributeName="startOffset"
            from="0%"
            to="100%"
            begin="0s"
            dur="30s"
            repeatCount="indefinite"
          ></animate>
        </textPath>
        <textPath
          startOffset="0%"
          fill="white"
          font-family="'Courier New', monospace"
          font-size="10px"
          xlink:href="#text-path-a"
        >
          {{ account }}
          <animate
            additive="sum"
            attributeName="startOffset"
            from="0%"
            to="100%"
            begin="0s"
            dur="30s"
            repeatCount="indefinite"
          ></animate>
        </textPath>
        <textPath
          startOffset="50%"
          fill="white"
          font-family="'Courier New', monospace"
          font-size="10px"
          xlink:href="#text-path-a"
        >
          {{ account }}
          <animate
            additive="sum"
            attributeName="startOffset"
            from="0%"
            to="100%"
            begin="0s"
            dur="30s"
            repeatCount="indefinite"
          ></animate>
        </textPath>
        <textPath
          startOffset="-50%"
          fill="white"
          font-family="'Courier New', monospace"
          font-size="10px"
          xlink:href="#text-path-a"
        >
          {{ account }}
          <animate
            additive="sum"
            attributeName="startOffset"
            from="0%"
            to="100%"
            begin="0s"
            dur="30s"
            repeatCount="indefinite"
          ></animate>
        </textPath>
      </text>
      <g style="transform: translate(55px, 150px)">
        <rect width="180px" height="26px" rx="8px" ry="8px" fill="rgba(0,0,0,.6)"></rect>
        <text
          x="12px"
          y="17px"
          font-family="'Courier New', monospace"
          font-size="18px"
          fill="white"
        >
          <tspan fill="rgba(255,255,255,1)">WEB3 NFT Life</tspan>
        </text>
      </g>
      <g style="transform: translate(55px, 200px)">
        <rect width="180px" height="26px" rx="8px" ry="8px" fill="rgba(0,0,0,.6)"></rect>
        <text
          x="12px"
          y="17px"
          font-family="'Courier New', monospace"
          font-size="12px"
          fill="white"
        >
          <tspan fill="rgba(255,255,255,0.6)">Owner:</tspan>
          {{ fmtAccount }}
        </text>
      </g>
      <g style="transform: translate(73px, 250px)">
        <rect width="140px" height="26px" rx="8px" ry="8px" fill="rgba(0,0,0,0.6)"></rect>
        <text
          x="12px"
          y="17px"
          font-family="'Courier New', monospace"
          font-size="12px"
          fill="white"
        >
          <tspan fill="rgba(255,255,255,0.6)">Date:</tspan>
          {{ date }}
        </text>
      </g>
      <g style="transform: translate(77px, 300px)">
        <rect width="130px" height="26px" rx="8px" ry="8px" fill="rgba(0,0,0,0.6)"></rect>
        <text
          x="12px"
          y="17px"
          font-family="'Courier New', monospace"
          font-size="12px"
          fill="white"
        >
          <tspan fill="rgba(255,255,255,0.6)">Block:</tspan>
          {{ blockNumber }}
        </text>
      </g>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { useAccountStore } from '@/stores/account'
import { useConnectorStore } from '@/stores/connector'
import { truncateAddress } from '@/utils'
import dayjs from 'dayjs'
import { storeToRefs } from 'pinia'
import { computed, ref } from 'vue'

const connectorStore = useConnectorStore()
const { account } = storeToRefs(connectorStore)

const fmtAccount = computed(() => {
  return truncateAddress(account.value)
})

const accountStore = useAccountStore()
const { blockNumber } = storeToRefs(accountStore)

const date = ref(dayjs().format('YYYY/MM/DD'))
</script>

<style scoped lang="less">
#nftBox {
  position: fixed;
  left: -9999999999px;
  top: -9999999999px;
  z-index: 0;
  width: 290px;
  height: 500px;
}
</style>
